<template>
    <LayoutWrap class="profile">
        <div>
            <el-row :gutter="20">
                <el-col :span="6" :xs="24">
                    <UserCard :user="userinfo" />
                </el-col>

                <el-col :span="18" :xs="24">
                    <el-card>
                        <el-tabs v-model="activeTab">
                            <el-tab-pane label="Account" name="account">
                                <Account v-loading="isLoading" :userinfo="userinfo" @on-ok="getUserInfo" />
                            </el-tab-pane>
                            <el-tab-pane label="Permission" name="permission">
                                <PermissionCheckboxGroup
                                    v-loading="isLoading"
                                    :is-detail="true"
                                    :model-permission="modelPermission"
                                    @change="handlePerimissionChange"
                                    v-model="permission"
                                    form-label-width="0px"
                                />
                            </el-tab-pane>
                            <!-- <el-tab-pane label="Activity" name="activity">
                                <Activity />
                            </el-tab-pane>
                            <el-tab-pane label="Timeline" name="timeline">
                                <Timeline />
                            </el-tab-pane> -->
                        </el-tabs>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </LayoutWrap>
</template>

<script>
import UserCard from './components/UserCard';
// import Activity from './components/Activity';
// import Timeline from './components/Timeline';
import Account from './components/Account';
import PermissionCheckboxGroup from '@/components/PermissionCheckboxGroup/index.vue';
import {getRolesByIdPermission} from '@/api/role';
import {getUser} from '@/api/auth';
import jwt from 'jsonwebtoken';
import {mapState} from 'vuex';

export default {
    name: 'Profile',
    components: {UserCard, PermissionCheckboxGroup, Account},
    data() {
        return {
            modelPermission: {
                childModules: [],
                functionMap: {},
                parentModules: [],
                selectedFunctions: [],
                selectedModules: []
            },
            userinfo: {},
            activeTab: 'account',
            permission: [],
            isLoading: false
        };
    },
    computed: {...mapState('user', ['userToken'])},
    created() {
        this.getUserInfo();
    },
    methods: {
        async getUserInfo() {
            this.isLoading = true;
            try {
                const token = (this.userToken || '').split(' ')[1];

                // get the decoded payload and header
                const decoded = jwt.decode(token, {complete: true});
                const {data: res} = await getUser(decoded.payload.id);

                const row = res.data;

                const {
                    data: {data, status}
                } = await getRolesByIdPermission(row.roles.join(','));
                if (status === 200) {
                    this.modelPermission = data;

                    this.userinfo = {...this.form, ...row, password2: row.password};
                }
            } catch (error) {
                console.error('error', error);
            } finally {
                this.isLoading = false;
            }
        },
        handlePerimissionChange() {}
    }
};
</script>

<style lang="scss" scoped>
.profile {
    ::v-deep {
        .el-tabs__nav {
            // background-color: #f00;
        }
        .el-tabs__item {
            background-color: transparent;
        }
    }
}
</style>
